import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import CustomRadioGroup from '@/components/antd-comp/radio/CustomRadioGroup'
import SwitchComponent from '@/components/antd-comp/switch'
import { useAssistantStore } from '@/store/assistantStore'
import { Popover, Tooltip } from 'antd'
import { useState } from 'react'
import '../css/individuation.less'
import IndivduationDiaIcon from './IndivduationDIaIcon'
import Temperature from './Temperature'

export default function IndividuationDia({ indivduationClose, indivduationSubmit }) {
  const { assistantState, dispatchAssistant } = useAssistantStore()
  const [isChecked, setIsChecked] = useState(false)
  const content = (
    /* = img >>>>>>>>> */
    <div className="sourceCase caseOverFlowY">
      采购、部署、维护和处置。有助于优化资产的使用和维护成本，并确保资产符合业务需求。[2]
      <br />
      IT基础设施库（1TIL） 是一套广泛认可的I
      服务管理最佳实践框架。提供了一套标准化的流程和方法，帮助组织设计、实施、管理和优化1T 服务。[3]
      <br />
      IT服务的生命周期通常包括服务策略、服务设计、服务转换、服务运营、持续服务改进。[3]
      <br />
      IT服务的持续改进是一个持续的过程，旨在不断评估和优化IT服务的效率、效果和质量。通常涉及到收集反馈、分析数
      据、识别问题和实施改进措施。[3]
      <br />
      IT服务管理的关键绩效指标包括服务可用性、服务响应时问、服务解決时间、用户满意度、服务成本。[3]
      <br />
      IT服务的合规性要求包括遵守相关的法律法规，如数据保护法规；符合行业标准和最佳实践，如 ISO/EC
      20000；实施适当的安全措施，保护敏感数据和系统。[3]
      <br />
      <div className="flexCol">
        <div className="individuation_quote">引用知识库</div>
        <div className="individuation_quote_list">[1] IT服务知识库_T服务常见问题1.docx</div>
        <div className="individuation_quote_list">[2] IT服务知识库_1T服务常见问题4.docx</div>
      </div>
    </div>
  )
  return (
    <ModalComponent
      title="个性化配置"
      width={626}
      content={
        <div className="flexCol caseOverFlowY" style={{ maxHeight: '70vh' }}>
          {/* 调用方式 */}
          <div
            className="flexRowStart individuation_case"
            style={{
              marginTop: '12px'
            }}
          >
            <span className="flexRowStart individuation_headTit">
              调用方式
              <Tooltip placement="top" title={'每轮对话自动召回或按需从特定知识库召回'} arrow={true}>
                <div className="cursonCase individuation_iconCase">
                  <IndivduationDiaIcon></IndivduationDiaIcon>
                </div>
              </Tooltip>
            </span>
            <div className="flexCol individuation_rightCase">
              <div className="flexRowStart individuation_radioCase">
                <CustomRadioGroup
                  options={[
                    { label: '自动调用', value: 1 },
                    { label: '自定义调用', value: 2 }
                  ]}
                  // defaultValue={assistantState.reply_style || 1}
                  onChange={e => {
                    // dispatchAssistant('setting', { reply_style: e })
                  }}
                ></CustomRadioGroup>
              </div>
              <span className="individuation_desc">每轮对话自动召回或按需从特定知识库召回</span>
            </div>
          </div>
          {/* 检索方式 */}
          <div className="flexRowStart individuation_case">
            <span className="flexRowStart individuation_headTit">
              检索方式
              <Tooltip
                placement="top"
                title={'知识库在检索知识的过程中，可采用不同的检索方式，从而提高所生成答案的准确度与有效性'}
                arrow={true}
              >
                <div className="cursonCase individuation_iconCase">
                  <IndivduationDiaIcon></IndivduationDiaIcon>
                </div>
              </Tooltip>
            </span>
            <div className="flexCol individuation_rightCase">
              <div className="flexRowStart individuation_radioCase">
                <CustomRadioGroup
                  options={[
                    { label: '语意查询', value: 1 },
                    { label: '全文索引', value: 2 },
                    { label: '混合检索', value: 3 }
                  ]}
                  // defaultValue={assistantState.reply_style || 1}
                  onChange={e => {
                    // dispatchAssistant('setting', { reply_style: e })
                  }}
                ></CustomRadioGroup>
              </div>
              <span className="individuation_desc">
                知识库在检索知识的过程中，可采用不同的检索方式，从而提高所生成答案的准确度与有效性
              </span>
            </div>
          </div>
          {/* 最小匹配度 */}
          <div className="flexRowStart individuation_case">
            <span className="flexRowStart individuation_headTit">
              最小匹配度
              <Tooltip
                placement="top"
                title={'通过最小匹配度，设置检索内容与用户查询的相关性，若低于设置的最小匹配度，则不会被召回给大模型'}
                arrow={true}
              >
                <div className="cursonCase individuation_iconCase">
                  <IndivduationDiaIcon></IndivduationDiaIcon>
                </div>
              </Tooltip>
            </span>
            <div className="flexCol individuation_rightCase" style={{ width: '100%', marginTop: '-0.5rem' }}>
              <Temperature
                value={assistantState.temperature}
                onChange={val => dispatchAssistant('setting', { temperature: val })}
              ></Temperature>
              <span className="individuation_desc">
                通过最小匹配度，设置检索内容与用户查询的相关性，若低于设置的最小匹配度，则不会被召回给大模型
              </span>
            </div>
          </div>
          {/* 最大召回数 */}
          <div className="flexRowStart individuation_case">
            <span className="flexRowStart individuation_headTit">
              最大召回数
              <Tooltip
                placement="top"
                title={'从知识库检索信息后，返回给大模型的最大段落数。数值越大，内容越多'}
                arrow={true}
              >
                <div className="cursonCase individuation_iconCase">
                  <IndivduationDiaIcon></IndivduationDiaIcon>
                </div>
              </Tooltip>
            </span>
            <div className="flexCol individuation_rightCase" style={{ width: '100%', marginTop: '-0.5rem' }}>
              <Temperature
                value={assistantState.temperature}
                onChange={val => dispatchAssistant('setting', { temperature: val })}
              ></Temperature>
              <span className="individuation_desc">从知识库检索信息后，返回给大模型的最大段落数，数值越大内容越多</span>
            </div>
          </div>
          {/* 显示来源 */}
          <div className="flexRowStart individuation_case">
            <span className="flexRowStart individuation_headTit">
              显示来源
              <Tooltip
                placement="top"
                title={'智能体回答用户问题时，若调用了知识库，会向用户展示参考来源，关闭则不展示'}
                arrow={true}
              >
                <div className="cursonCase individuation_iconCase">
                  <IndivduationDiaIcon></IndivduationDiaIcon>
                </div>
              </Tooltip>
            </span>
            <div className="flexCol individuation_rightCase">
              <div className="applicationEdit_switchCase">
                <SwitchComponent
                  checked={isChecked}
                  onChange={(e, event) => {
                    setIsChecked(e)
                  }}
                  size="large"
                />
              </div>
              <span className="individuation_desc" style={{ marginTop: '10px' }}>
                开启后，将展示来源信息
                <Popover placement="topLeft" content={content} title="">
                  <span className="individuation_Giveanexample cursonCase">示例</span>
                </Popover>
              </span>
              {/* {isChecked && (
                <div className="sourceCase caseOverFlowY">
                  采购、部署、维护和处置。有助于优化资产的使用和维护成本，并确保资产符合业务需求。[2]
                  <br />
                  IT基础设施库（1TIL） 是一套广泛认可的I
                  服务管理最佳实践框架。提供了一套标准化的流程和方法，帮助组织设计、实施、管理和优化1T 服务。[3]
                  <br />
                  IT服务的生命周期通常包括服务策略、服务设计、服务转换、服务运营、持续服务改进。[3]
                  <br />
                  IT服务的持续改进是一个持续的过程，旨在不断评估和优化IT服务的效率、效果和质量。通常涉及到收集反馈、分析数
                  据、识别问题和实施改进措施。[3]
                  <br />
                  IT服务管理的关键绩效指标包括服务可用性、服务响应时问、服务解決时间、用户满意度、服务成本。[3]
                  <br />
                  IT服务的合规性要求包括遵守相关的法律法规，如数据保护法规；符合行业标准和最佳实践，如 ISO/EC
                  20000；实施适当的安全措施，保护敏感数据和系统。[3]
                  <br />
                  <div className="flexCol">
                    <div className="individuation_quote">引用知识库</div>
                    <div className="individuation_quote_list">[1] IT服务知识库_T服务常见问题1.docx</div>
                    <div className="individuation_quote_list">[2] IT服务知识库_1T服务常见问题4.docx</div>
                  </div>
                </div>
              )} */}
            </div>
          </div>
        </div>
      }
      okText="确定"
      cancelText="取消"
      onCancel={() => {
        // setindividuation(false)
        indivduationClose()
      }}
      onOk={() => {
        indivduationSubmit()
      }}
    />
  )
}
